<template>
  <router-view />
</template>
<script lang="ts">
import { useQuasar } from 'quasar';
import { useGlobalStore } from 'stores/global-store';
import { useUserStore } from 'stores/user-store';
import languages from 'quasar/lang/index.json';
import { defineComponent, watch } from 'vue';
import { storeToRefs } from 'pinia';

export default defineComponent({
  name: 'App',
  setup() {
    const $q = useQuasar();
    const globalStore = useGlobalStore();
    const { isLoading } = storeToRefs(globalStore);
    const userStore = useUserStore();
    $q.dark.set(true);
    console.log(`Current System language:${$q.lang.getLocale()}`);
    globalStore.initUILanguage();
    // watch(uiLanguage, async (code: string) => {
    //   console.log(uiLanguage!.value);
    //   Moment.locale(uiLanguage!.value);
    //   const quasarLang = languages.find(
    //     (lang) => lang.isoName === uiLanguage!.value
    //   );
    //   if (quasarLang) {
    //     const quasarLanguage = await import(`quasar/lang/${code}`);
    //     $q.lang.set(quasarLanguage.default);
    //   }
    // });
    userStore.initCurrentUser();
    globalStore.getLanguageConfig($q.lang.getLocale());
    globalStore.getComplimentConfig();
    if (isLoading.value) {
      $q.loadingBar.start();
    }
    watch(isLoading, (value) => {
      if (value) {
        $q.loadingBar.start(150);
      } else {
        $q.loadingBar.stop();
      }
    });
  },
});
</script>
